<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>AsyncFlow监控</title>

    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <!--    &lt;!&ndash; 引入样式 &ndash;&gt;-->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

    <link rel="stylesheet" type="text/css" href="../css/element-ui-index.css"/>
    <script type="text/javascript" src="../js/element-ui-index.js"></script>

    <!-- 引入JQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/jquery.jsonview.css"/>
    <script type="text/javascript" src="../js/jquery.jsonview.js"></script>

    <style>

        /*卡片字体的样式*/
        .text {
            font-size: 16px;
        }

        /*每个卡片的宽度*/
        .box-card {
            width: 99%;
        }

        /*每个卡片的间隔*/
        .item {
            padding: 0 0;
        }

        .title {
            font-size: 18px;
            font-weight: bold;
            color: #303133;
            padding-bottom: 17px;
            padding-top: 17px;
        }

        p {
            margin: 0;
            padding: 0;
        }

        .row {
            overflow: hidden;
            margin-bottom: 22px;
        }

        .row .col_left {
            float: left;
            width: 420px;
        }

        .row .col_right {
            float: left;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
        }

    </style>

</head>
<body style="padding:10px;">

<div id="app" style="width: 100%">
    <el-form :inline="true" :model="queryRequest" class="demo-form-inline">
        <el-form-item label="唯一号">
            <el-input v-model="queryRequest.businessSerialId" placeholder="唯一号"></el-input>
        </el-form-item>
        <el-form-item label="操作节点">
            <!--            <el-input v-model="queryRequest.asyncFlowName" placeholder="操作节点"></el-input>-->
            <el-select v-model="queryRequest.asyncFlowName" clearable filterable placeholder="操作节点">
                <el-option
                        v-for="item in asyncFlowNameList"
                        :key="item"
                        :label="item"
                        :value="item">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="环境">
            <!--            <el-input v-model="queryRequest.asyncFlowName" placeholder="操作节点"></el-input>-->
            <el-select v-model="queryRequest.evn" clearable filterable placeholder="环境">
                <el-option
                        v-for="item in evnList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="时间">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="开始日期" v-model="queryRequest.startDate"
                                style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col :span="11">
                <el-date-picker type="date" placeholder="结束日期" v-model="queryRequest.endDate"
                                style="width: 100%;"></el-date-picker>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="queryAsyncFlowLogList(1)">查询</el-button>
        </el-form-item>
    </el-form>
    <template>
        <el-table
                :data="asyncFlowLogList"
                stripe
                header-align="center"
                align="center"
                style="width: 100%">
            <el-table-column
                    prop="businessSerialId"
                    label="唯一号">
            </el-table-column>
            <el-table-column
                    prop="asyncFlowName"
                    label="操作节点">
            </el-table-column>
            <el-table-column
                    prop="useTime"
                    label="耗时">
            </el-table-column>
            <el-table-column
                    prop="logTime"
                    label="日志时间">
            </el-table-column>
            <el-table-column
                    prop="result"
                    label="结果">
            </el-table-column>
            <el-table-column
                    prop="evn"
                    label="环境">
            </el-table-column>
            <el-table-column
                    prop="operator"
                    label="操作人">
            </el-table-column>
            <el-table-column
                    prop="sourceDes"
                    label="来源描述">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="queryAsyncFlowLogDetail(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="queryFlowDiagram(scope.row)" type="text" size="small">流程图</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryRequest.pageNo"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="queryRequest.pageSize"
                layout="total,sizes,prev, pager, next,jumper"
                :total="totalCount">
        </el-pagination>
    </template>
    <template>
        <el-dialog :visible.sync="logDetailVisible"
                   @close="closeLogDetailDialog()"
        >
            <template slot="title">
                <p class="title">{{logInfoUseTimeDetail}}</p>
            </template>
            <el-collapse v-model="activeNames" accordion>
                <el-collapse-item name="-1">
                    <template slot="title">
                        <el-button type="primary" plain size="medium">请求</el-button>
                        <!--                        <p class="title">请求</p>-->
                    </template>
                    <template>
                        <div>
                            <el-button-group>
                                <el-button id="collapse-btn" type="primary" size="mini"
                                           @click="JSONViewOperator('flowRequestJson','collapse')">全部收缩
                                </el-button>
                                <el-button id="expand-btn" type="primary" size="mini"
                                           @click="JSONViewOperator('flowRequestJson','expand')">全部展开
                                </el-button>
                                <!--                            <el-button id="toggle-btn" type="primary" size="mini" round @click="JSONViewOperator('flowRequestJson','toggle')">Toggle-->
                                <!--                            </el-button>-->
                                <el-button id="toggle1-btn" type="primary" size="mini"
                                           @click="JSONViewOperator('flowRequestJson','ToggleLevel1')">
                                    二级展开
                                </el-button>
                                <el-button id="toggle2-btn" type="primary" size="mini"
                                           @click="JSONViewOperator('flowRequestJson','ToggleLevel2')">
                                    三级展开
                                </el-button>
                                <el-button id="copy-btn" type="primary" size="mini"
                                           @click="copy('flowRequestJson',null)">复制
                                </el-button>
                            </el-button-group>
                            <div id="flowRequestJson"></div>
                        </div>


                    </template>

                </el-collapse-item>
                <el-collapse-item :name="itemGroup.nodeTypeOrderBy" v-for="itemGroup in logDetailGroupByList"
                                  :key="itemGroup">
                    <template slot="title">
                        <el-badge :value="itemGroup.errorCount" :hidden="itemGroup.errorHidden">
                            <!--                                <el-tag > {{itemGroup.nodeTypeName}}</el-tag>-->
                            <el-button type="primary" plain size="medium">{{itemGroup.nodeTypeName}}</el-button>
                        </el-badge>
                        <!--                        <p class="title">-->
                        <!--                           -->
                        <!--                        </p>-->
                    </template>
                    <div v-if="itemGroup.asyncFlowNodeLogVoList.length>0">
                        <el-card class="box-card" v-for="item in itemGroup.asyncFlowNodeLogVoList" :key="item"
                                 :style="item.code!=200?'color: #F56C6C':(item.useTime>150?'color:#E6A23C':'')">
                            方法：{{item.nodeInfo}}
                            <br/>结果：{{item.code}}
                            <br/>耗时：{{item.useTime}}
                            <br/>时间：{{item.logTime}}
                            <br/>消息：{{item.resultMsg}}
                            <div v-if="item.asyncFlowNodeDetailLogVoList.length>0">
                                明细：<span v-for="itemNode in item.asyncFlowNodeDetailLogVoList" :key="itemNode"
                                         class="text item">
                                        <el-button type="primary" size="mini" round
                                                   @click="openNodeLogDetail(itemNode,item)">
                                            {{itemNode.logDetailName}}
                                        </el-button>
                                        <el-dialog
                                                width="60%"
                                                title=""
                                                :visible.sync="itemNode.nodeLogDetailVisible"
                                                v-if="itemNode.nodeLogDetailVisible"
                                                :key="itemNode"
                                                append-to-body>
                                            <el-container>
                                                <el-aside width="50%">
                                                    <br/>
                                                    <div>
                                                        <el-button-group>
                                                            <el-button v-if="item.executeEnumCode!=4" id="collapse-btn1"
                                                                       type="primary" size="mini"
                                                                       @click="JSONViewOperator('nodeRequestJson','collapse')">全部收缩</el-button>
                                                            <el-button v-if="item.executeEnumCode!=4" id="expand-btn1"
                                                                       type="primary" size="mini"
                                                                       @click="JSONViewOperator('nodeRequestJson','expand')">全部展开</el-button>
                                                            <!--                                                            <el-button v-if="item.executeEnumCode!=4" id="toggle-btn1"  type="primary" size="mini" round-->
                                                            <!--                                                                    @click="JSONViewOperator('nodeRequestJson','toggle')">Toggle</el-button>-->
                                                            <el-button v-if="item.executeEnumCode!=4" id="toggle1-btn1"
                                                                       type="primary" size="mini"
                                                                       @click="JSONViewOperator('nodeRequestJson','ToggleLevel1')">二级展开 </el-button>
                                                            <el-button v-if="item.executeEnumCode!=4" id="toggle2-btn1"
                                                                       type="primary" size="mini"
                                                                       @click="JSONViewOperator('nodeRequestJson','ToggleLevel2')">三级展开 </el-button>
                                                            <el-button id="copy-btn1" type="primary" size="mini"
                                                                       @click="copy('nodeRequestJson',item.executeEnumCode)">复制</el-button>
                                                        </el-button-group>
                                                            <div :id="Req"></div>
                                                    </div>
                                                </el-aside>
                                                <el-main width="50%">
                                                   <div>
                                                        <el-button-group>
                                                         <el-button v-if="item.executeEnumCode!=4" id="collapse-btn2"
                                                                    type="primary" size="mini"
                                                                    @click="JSONViewOperator('nodeResponseJson','collapse')">全部收缩 </el-button>
                                                        <el-button v-if="item.executeEnumCode!=4" id="expand-btn2"
                                                                   type="primary" size="mini"
                                                                   @click="JSONViewOperator('nodeResponseJson','expand')">全部展开 </el-button>
                                                            <el-button v-if="item.executeEnumCode!=4" id="toggle1-btn2"
                                                                       type="primary" size="mini"
                                                                       @click="JSONViewOperator('nodeResponseJson','ToggleLevel1')">二级展开 </el-button>
                                                        <el-button v-if="item.executeEnumCode!=4" id="toggle2-btn2"
                                                                   type="primary" size="mini"
                                                                   @click="JSONViewOperator('nodeResponseJson','ToggleLevel2')">三级展开</el-button>
                                                        <el-button v-if="item.executeEnumCode!=4" id="copy-btn2"
                                                                   type="primary" size="mini"
                                                                   @click="copy('nodeResponseJson',item.executeEnumCode)">复制</el-button>
                                                                </el-button-group>
                                                         <div :id="Res"></div>
                                                    </div>
                                                </el-main>
                                            </el-container>
                                        </el-dialog>
                                    </span>
                            </div>
                        </el-card>
                    </div>

                </el-collapse-item>

                <el-collapse-item name="8">
                    <template slot="title">
                        <el-button type="primary" plain size="medium">返回</el-button>
                    </template>
                    <div>
                        <el-button-group>

                            <el-button id="collapse-btn3" type="primary" size="mini"
                                       @click="JSONViewOperator('flowResponseJson','collapse')">全部收缩
                            </el-button>
                            <el-button id="expand-btn3" type="primary" size="mini"
                                       @click="JSONViewOperator('flowResponseJson','expand')">全部展开
                            </el-button>
                            <!--                        <el-button id="toggle-btn3" type="primary" size="mini" round @click="JSONViewOperator('flowResponseJson','toggle')">Toggle</el-button>-->
                            <el-button id="toggle1-btn3" type="primary" size="mini"
                                       @click="JSONViewOperator('flowResponseJson','ToggleLevel1')">二级展开
                            </el-button>
                            <el-button id="toggle2-btn3" type="primary" size="mini"
                                       @click="JSONViewOperator('flowResponseJson','ToggleLevel2')">三级展开
                            </el-button>
                            <el-button id="copy-btn3" type="primary" size="mini"
                                       @click="copy('flowResponseJson')">
                                复制
                            </el-button>
                        </el-button-group>
                        <div id="flowResponseJson"></div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-dialog>
    </template>
</div>
</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                urlPath: window.location.href.replace('/asyncFlowWeb/asyncFlowMonitorWeb', '/AsyncFlowAPI'),
                queryRequest: {
                    businessSerialId: '',
                    asyncFlowName: '',
                    startDate: '',
                    endDate: '',
                    pageNo: 1,
                    pageSize: 10,
                },
                activeNames: '',
                logDate: '',
                logDetailVisible: false,//日志明细对话框
                nodeLogDetailVisible: false,
                nodeRequestJson: '',
                nodeResponseJson: '',
                flowRequestJson: '',
                flowResponseJson: '',
                logInfoUseTimeDetail: '',//日志耗时明细
                asyncFlowLogList: [],
                totalCount: 0,//集合总条数
                logDetailGroupByList: [],//分组后的日志集合 按照请求类型分组
                Req: '',//节点明细日志的请求对应div 的ID
                Res: '',
                asyncFlowNameList: [],
                evnList: [{
                    value: 'all',
                    label: '全部'
                }, {
                    value: 'product',
                    label: '正式'
                }, {
                    value: 'stage',
                    label: '预发'
                }]
            };
        },
        mounted: function () {
            this.queryAsyncFlowLogList();
            this.queryAsyncFlowNameList();
        },
        methods: {
            queryAsyncFlowLogList(queryType) {
                const self = this;
                //通过查询按钮查询的默认查询第一页
                if (queryType === 1) {
                    self.queryRequest.pageNo = 1;
                }
                $.ajax({
                    type: "POST",
                    url: this.urlPath + "/getAsyncFlowLogByPage",
                    dataType: "json",
                    data: JSON.stringify(self.queryRequest),
                    contentType: "application/json",
                    success: function (result) {
                        self.asyncFlowLogList = result.asyncFlowLogVoList;
                        self.totalCount = result.totalCount;
                        self.$forceUpdate();
                    }

                });
            },
            queryAsyncFlowNameList() {
                const self = this;
                $.ajax({
                    type: "POST",
                    url: this.urlPath + "/getAsyncFlowNameList",
                    dataType: "json",
                    contentType: "application/json",
                    success: function (result) {
                        self.asyncFlowNameList = result;
                    }

                });
            },
            queryFlowDiagram(row) {
                const self = this;
                let href = window.location.href.replace("asyncFlowMonitorWeb", "flowDiagramWeb?trackGuid=" + row.trackGuid);   //当前页面域名
                window.open(href, '_blank')
            },
            // 打开流日志明细
            queryAsyncFlowLogDetail(row) {
                this.logDetailVisible = true;
                this.flowRequestJson = row.flowRequestJsonStr;
                this.flowResponseJson = row.flowResponseJsonStr;
                //Element 的对话框是懒加载的， 首次打开会获取不到dom,需要用如果下方式才行 或者setTimeout
                this.$nextTick(function () {
                    $("#flowRequestJson").JSONView(JSON.parse(row.flowRequestJsonStr), {collapsed: true});
                    $("#flowResponseJson").JSONView(JSON.parse(row.flowResponseJsonStr), {collapsed: true});
                });

                this.logInfoUseTimeDetail = row.logInfo;
                this.logDetailGroupByList = row.asyncFlowNodeMonitorVoList;


            },
            //关闭流日志明细
            closeLogDetailDialog() {
                this.logInfoUseTimeDetail = '';//日志耗时明细
                this.flowRequestJson = '';
                this.flowResponseJson = '';
                this.activeNames = '';

            },
            //打开节点内的日志明细
            openNodeLogDetail(nodeLogDetail, nodeLog) {
                this.Req = nodeLog.logFileName + "Req";
                this.Res = nodeLog.logFileName + "Res";

                nodeLogDetail.nodeLogDetailVisible = true;
                if (nodeLog.executeEnumCode === 4) {
                    this.nodeRequestJson = nodeLogDetail.nodeRequestJsonStr.replace(RegExp(";", "g"), ';<br/><br/>').replace(RegExp("\"", "g"), '');
                    this.nodeResponseJson = nodeLogDetail.nodeResponseJsonStr.replace(RegExp("\"", "g"), '');
                    this.$nextTick(function () {
                        $("#" + this.Req).html(this.nodeRequestJson);
                        $("#" + this.Res).html(this.nodeResponseJson);
                    });
                    this.$nextTick(function () {

                    });
                } else {
                    this.nodeRequestJson = nodeLogDetail.nodeRequestJsonStr;
                    this.nodeResponseJson = nodeLogDetail.nodeResponseJsonStr;

                    this.$nextTick(function () {
                        //判断是否json格式
                        if (this.isJSON(nodeLogDetail.nodeRequestJsonStr)) {
                            $("#" + this.Req).JSONView(nodeLogDetail.nodeRequestJsonStr, {collapsed: true});
                        } else {
                            $("#" + this.Req).html(nodeLogDetail.nodeRequestJsonStr);
                        }
                        if (this.isJSON(nodeLogDetail.nodeResponseJsonStr)) {
                            $("#" + this.Res).JSONView(nodeLogDetail.nodeResponseJsonStr, {collapsed: true});
                        } else {
                            $("#" + this.Res).html(nodeLogDetail.nodeResponseJsonStr);
                        }

                    });
                    this.$nextTick(function () {

                    });

                }
            },
            //分页==更换每页显示条数
            handleSizeChange(val) {
                this.queryRequest.pageSize = val;
                this.queryAsyncFlowLogList();
                console.log(val);
            },
            //分页==跳转掉指定页
            handleCurrentChange(val) {
                this.queryRequest.pageNo = val;
                this.queryAsyncFlowLogList();
                console.log(val);
            },
            isJSON(str) {
                if (typeof str == "string") {
                    try {
                        var jsonObj = JSON.parse(str);
                        if (typeof jsonObj == "object") {
                            return true;
                        } else {
                            return false;
                        }
                    } catch (e) {
                        console.log("error" + str + "!!!" + e);
                    }
                }
            },
            //jsonview  对应的操作
            JSONViewOperator(id, type) {
                if (id === 'nodeRequestJson') {
                    id = this.Req;
                }
                if (id === 'nodeResponseJson') {
                    id = this.Res;
                }

                if (type === 'ToggleLevel1' || type === 'ToggleLevel2') {

                    let level = 0;
                    if (type === 'ToggleLevel1') {
                        level = 1;
                    }
                    if (type === 'ToggleLevel2') {
                        level = 2;
                    }
                    $('#' + id).JSONView('toggle', level);
                } else {
                    $('#' + id).JSONView(type);
                }
            },
            //复制
            copy(id, executeEnumCode) {
                let text = '';
                if (id === 'flowRequestJson') {
                    text = this.flowRequestJson;
                }
                if (id === 'flowResponseJson') {
                    text = this.flowResponseJson;
                }
                if (id === 'nodeRequestJson') {
                    text = this.nodeRequestJson;
                }
                if (id === 'nodeResponseJson') {
                    text = this.nodeResponseJson;

                }
                //数据库 SQL语句
                if (executeEnumCode === 4) {
                    text = text.replace(RegExp("<br/>", "g"), '');
                }
                const input = document.createElement('input');
                document.body.appendChild(input);
                input.setAttribute('value', text);
                input.select();
                if (document.execCommand('copy')) {
                    document.execCommand('copy');
                }
                document.body.removeChild(input);
                this.$message({
                    message: '复制成功！！！',
                    type: 'success'
                });
            }
        }
    });
</script>